// pages/profile/friendInfo/index.ts
import tran from '../../utils/language'
import { commonTagList } from '../../utils/api.js'
Component({
  pageLifetimes: {
    show() {
      this.getLangList()
      this.getMbtil()
      this.getInterest()
      this.getProfession()
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    defaultParams: {
      type: Object,
      value: {},
      observer(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          this.handleData(newVal)
        }
      }
    },
    mbtiSwitch: {
      type: Boolean,
      value: false,
      observer(newVal) {
        this.setData({
          mbtiSwitch: newVal
        })
      }
    },
    resetUserFlag: {
      type: Boolean,
      value: false,
      observer(newVal) {
        if (newVal) {
          this.resetTap()
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    _t: tran._t('filterPopup'),
    indicatorDots: false,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
    characterSelectFlag: false,
    resetBtnFlag: false,
    imgList: [
      {
        img: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
        selectFlag: true
      },
      {
        img: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
        selectFlag: false
      },
      {
        img: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
        selectFlag: false
      }
    ],
    selectList: [
      {
        selectFlag: true,
        text: 'ENFP',
        tagTypeId: ''
      }
    ],
    mbtiList: [],
    switchChecked: true,
    skillList: [
      {
        selectFlag: true,
        text: '数据分析',
        img: '/images/expert.png'
      }
    ],
    langList: [],
    popupParams: {
      showPopup: true,
      showType: 0 // 0更新个人资料  1发送好友请求
    },
    sendFlag: true,
    filterData: [{ text: '全部', key: 'all', selectFlag: true }, { text: '仅在线', key: 'ONLINE', selectFlag: false }],
    pickerParams: {
      show: false,
      pickerType: 'MBTI',
      defaultValue: '',
      title: '性格类型',
      data: []
    },
    pickerParams1: {
      show: false,
      pickerType: 'interest',
      defaultValue: '',
      title: '兴趣'
    },
    pickerParams2: {
      show: false,
      pickerType: 'skill',
      defaultValue: '',
      title: '职业'
    },
    formData: {
      interestIds: '',
      characterType: '',
      professionId: '',
      personalities: '',
      professionName: '',
      interestName: '',
      languageText: '',
      languages: '',
      genderText: '',
      gender: '',
      ageText: '',
      ageValue: '',
      minAge: 0,
      maxAge: 0,
      online: 'all',
      currentProvinceCode: '',
      currentCityCode: '',
      currentDistrictCode: ''
    },
    currentMbtiList: [] as currentMbtiType[],
    mbtiValueText: '',
    selectType: '',
    interestList: [
      {
        text: '',
        selectFlag: false
      }
    ],
    professionList: [
      {
        text: '',
        selectFlag: false
      }
    ],
    selectMbtiList: [
      {
        selectFlag: false,
        text: '',
        tagTypeId: ''
      }
    ],
    paramsData: [],
    commonPickerGenderParams: {
      show: false,
      pickerType: 'gender',
      defaultValue: '',
      data: [] as commonPickerDataType[]
    },
    commonPickerAgeParams: {
      show: false,
      pickerType: 'age',
      defaultValue: '',
      data: [] as commonPickerDataType[]
    },
    commonPickerParams: {
      show: false,
      pickerType: 'language',
      defaultValue: '',
      data: [] as commonPickerDataType[]
    },
    commonPickerData: [] as commonPickerDataType[],
    commonPickerGenderData: [] as commonPickerDataType[],
    region: [],
    regionTextList: [''],
    regionCodeList: [],
    regionPostcode: '',
    commonPickerType: '',
    ageList: [
      {
        selectFlag: false,
        text: '18及以下',
        value: '0-18'
      },
      {
        selectFlag: false,
        text: '18-25',
        value: '18-25'
      },
      {
        selectFlag: false,
        text: '26-32',
        value: '26-32'
      },
      {
        selectFlag: false,
        text: '33-41',
        value: '33-41'
      },
      {
        selectFlag: false,
        text: '42-55',
        value: '42-55'
      },
      {
        selectFlag: false,
        text: '55及以上',
        value: '55-200'
      }
    ],
    pickerHomeAreaParams: {
      show: false,
      pickerType: 'areaHomeRegion',
      defaultValue: [''],
      data: [] as commonPickerDataType[]
    },
    mbtiSwitch: true,
    homeRegion: [''],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    checkReset() {
      const { filterData, formData } = this.data
      const {
        interestIds, characterType, professionId, personalities, professionName, interestName, languageText, languages, genderText, gender, ageText, ageValue, minAge, maxAge, online, currentProvinceCode, currentCityCode, currentDistrictCode } = formData
        // 判断，只要有一项，就高亮显示重置
      if (interestIds || characterType || professionId || personalities || professionName || interestName || languageText || languages || genderText || gender || ageText || ageValue || minAge || maxAge || online != 'all' || currentProvinceCode || currentCityCode || currentDistrictCode) {
        this.setData({
          resetBtnFlag: true
        })
      } else {
        this.setData({
          resetBtnFlag: false
        })
      }
    },
    mbtiSwitchChange(e: any) {
      this.setData({
        mbtiSwitch: e.detail
      })
    },
    pickerHomeRegionCancle() {
      const { pickerHomeAreaParams } = this.data
      pickerHomeAreaParams.show = false
      this.setData({
        pickerHomeAreaParams
      })
    },
    /**
     * 区域选择器确认按钮
     * @param e 
     */
    commonHomeAreaPickerConfirm(e: any) {
      const obj = e.detail.value
      if (obj && Object.keys(obj).length > 0) {
        const { formData } = this.data
        const regionCodeList: any = [obj.provincesValue, obj.cityValue, obj.regionValue]
        const regionTextList: any = [obj.provincesLabel, obj.cityLabel, obj.regionLabel]
        if (regionCodeList.length > 0) {
          formData.currentProvinceCode = obj.provincesValue
          formData.currentCityCode = obj.cityValue
          formData.currentDistrictCode = obj.regionValue
        }
        this.setData({
          regionTextList,
          regionCodeList,
          formData,
        }, () => {
          this.checkReset()
        })
      }
    },
    handleCommonHomeAreaPicker(e: baseEvent) {
      const { pickerHomeAreaParams, formData, homeRegion } = this.data
      const type = e.currentTarget.dataset.type;
      pickerHomeAreaParams.pickerType = type
      pickerHomeAreaParams.show = true
      pickerHomeAreaParams.defaultValue = pickerHomeAreaParams.defaultValue || homeRegion
      this.setData({ pickerHomeAreaParams, commonPickerType: type })
    },
    commonPickerCancel() {
      const { commonPickerAgeParams, commonPickerGenderParams, commonPickerParams } = this.data
      commonPickerAgeParams.show = false
      commonPickerGenderParams.show = false
      commonPickerParams.show = false
      this.setData({
        commonPickerAgeParams,
        commonPickerGenderParams,
        commonPickerParams
      })
    },
    /**
     * 处理父组件带过来的参数，给表单回显
     */
    handleData(obj: any) {
      let { commonPickerParams, regionTextList, commonPickerGenderParams, commonPickerAgeParams, formData, pickerParams2, filterData, pickerParams, pickerParams1, pickerHomeAreaParams, mbtiSwitch } = this.data
      commonPickerParams.defaultValue = obj.languages || ''
      formData.languageText = obj.languageText || ''
      regionTextList = obj.hometownProvinceName ? [obj.hometownProvinceName, obj.hometownCityName, obj.hometownDistrictName] : (obj.regionTextList || [])
      regionTextList = regionTextList || obj.regionTextList
      commonPickerGenderParams.defaultValue = obj.gender || ''
      commonPickerAgeParams.defaultValue = obj.ageText || ''
      pickerParams2.defaultValue = obj.professionId || ''
      formData.professionName = obj.professionName || ''
      formData.interestName = obj.interestName || ''
      formData.personalities = obj.personalities || ''
      formData.genderText = obj.genderText || ''
      formData.ageText = obj.ageText || ''
      formData.ageValue = obj.ageValue || ''
      pickerParams.defaultValue = obj.personalities || ''
      pickerParams1.defaultValue = obj.interestIds || ''
      if (obj.ageValue) {
        const list = obj.ageValue ? obj.ageValue.split('-') : formData.ageValue
        formData.minAge = list[0]
        formData.maxAge = list[1]
      }
      if (obj.currentProvinceCode) {
        pickerHomeAreaParams.defaultValue = [obj.currentProvinceCode, obj.currentCityCode, obj.currentDistrictCode]
      }
      if (obj.online) {
        filterData.map(item => {
          if (item.key == obj.online) {
            item.selectFlag = true
          } else {
            item.selectFlag = false
          }
        })
      }
      this.setData({
        commonPickerParams,
        regionTextList,
        commonPickerGenderParams,
        commonPickerAgeParams,
        formData,
        pickerParams,
        pickerParams1,
        pickerHomeAreaParams,
        mbtiSwitch
      }, () => {
        this.checkReset()
      })
    },
    // 重置选项
    resetFilter() {
      const { filterData } = this.data
      filterData.map((item: any, index: any) => {
        if (index == 0) {
          item.selectFlag = true
        } else {
          item.selectFlag = false
        }
      })
      this.setData({
        filterData
      })
    },
    resetTap() {
      let formData = {
        interestIds: '',
        characterType: '',
        professionId: '',
        personalities: '',
        professionName: '',
        interestName: '',
        languageText: '',
        languages: '',
        genderText: '',
        gender: '',
        ageText: '',
        minAge: 0,
        maxAge: 0,
        online: 'all',
        currentProvinceCode: '',
        currentCityCode: '',
        currentDistrictCode: ''
      }
      this.resetFilter()
      this.setData({
        formData,
        regionTextList: [],
        regionCodeList: []
      }, () => {
        this.checkReset()
      })
    },
    confirmPopup() {
      const { mbtiSwitch } = this.data
      const obj = {
        ...this.data.formData,
        mbtiSwitch
      }
      this.triggerEvent('confirmPopup', obj)
      // this.resetTap()
    },
    onClose() {
      this.triggerEvent('onClose')
    },
    /**
     * 普通的选择器确认按钮
     * @param e 
     */
    commonPickerConfirm(e: any) {
      const { commonPickerType, formData } = this.data
      const obj = JSON.parse(JSON.stringify(e.detail.value))
      if (commonPickerType == 'language') { // 语言
        formData.languageText = obj.text
        formData.languages = obj.value
      } else if (commonPickerType == 'gender') { // 性别
        formData.genderText = obj.text
        formData.gender = obj.value
      } else if (commonPickerType == 'age') { // 年龄范围
        formData.ageText = obj.text ? obj.text : formData.ageText
        formData.ageValue = obj.value ? obj.value : formData.ageValue
        const list = obj.value ? obj.value.split('-') : formData.ageValue
        formData.minAge = list[0]
        formData.maxAge = list[1]
      } else if (commonPickerType == 'skill') { // 技能
        formData.professionName = obj.text
        formData.professionId = obj.value
      }
      this.setData({
        formData
      }, () => {
        this.checkReset()
      })
      this.commonPickerCancel()
    },
    bindRegionChange(e: any) {
      const { formData } = this.data
      const regionCodeList = e.detail.code
      const regionTextList = e.detail.value
      const regionPostcode = e.detail.opstcode
      if (regionCodeList.length > 0) {
        formData.currentProvinceCode = regionCodeList[0]
        formData.currentCityCode = regionCodeList[1]
        formData.currentDistrictCode = regionCodeList[2]
      }
      this.setData({
        regionTextList,
        regionCodeList,
        regionPostcode
      })
    },
    /**
     * 从app.ts里面获取全局的语言列表
     */
    getLangList() {
      let list = getApp().globalData.langList
      let langList: any = [
        {
          selectFlag: false,
          text: '全部',
          value: 'all'
        }
      ]
      list.length > 0 && list.map((item: any) => {
        const obj = {
          selectFlag: false,
          ...item
        }
        langList.push(obj)
      })
      this.setData({
        langList
      })
    },
    mbtiSwitchChange(e: any) {
      this.setData({
        mbtiSwitch: e.detail
      })
    },
    getMbtil() {
      let list = getApp().globalData.mbtiList
      let mbtiList: any = [
        // {
        //   selectFlag: false,
        //   text: '全部'
        // }
      ]
      list.length > 0 && list.map((item: any) => {
        const obj = {
          selectFlag: false,
          text: item
        }
        mbtiList.push(obj)
      })
      const { pickerParams } = this.data
      pickerParams.data = mbtiList
      this.setData({
        selectList: mbtiList,
        mbtiList
      }, () => {
      })
    },
    /**
     * 清空选项列表
     */
    clearSelectList() {
      this.setData({
        selectList: []
      })
    },
    /**
     * 获取兴趣列表
     */
    getInterest() {
      let params = {
        tagType: 'INTEREST'
      }
      commonTagList(params).then(res => {
        res.length > 0 && res.map((item: any) => {
          item.text = item.tagName
          item.selectFlag = false
        })
        this.setData({
          selectList: res,
          interestList: res
        })
      })
    },
    /**
     * 获取职业技能列表
     */
    getProfession() {
      let params = {
        tagType: 'SKILL'
      }
      commonTagList(params).then(res => {
        let list = [{
          text: '全部',
          value: null,
          selectFlag: false,
          tagTypeId: ''
        }]
        res.length > 0 && res.map((item: any) => {
          item.text = item.tagName
          item.selectFlag = false
          item.value = item.tagTypeId
          list.push(item)
        })
        this.setData({
          selectList: list,
          professionList: list
        })
      })
    },
    /**
     * 打开选项的面板
     * @param e 
     */
    handleMbtiPicker(e: any) {
      const type = e.currentTarget.dataset.type;
      const { selectList, pickerParams, pickerParams1, pickerParams2, mbtiList } = this.data
      let list = []
      if (type == 'interest') { // 兴趣
        pickerParams1.show = true
        pickerParams1.pickerType = type
        list = this.data.interestList
        this.setData({
          pickerParams1: pickerParams1
        })
      } else if (type == 'skill') { // 职业技能
        // this.getProfession()
        pickerParams2.show = true
        pickerParams2.pickerType = type
        list = this.data.professionList
        this.setData({
          pickerParams2: pickerParams2
        })
      } else { // 性格mbti
        // this.getMbtil()
        pickerParams.show = true
        pickerParams.pickerType = type
        // pickerParams.data = mbtiList
        list = selectList
        this.setData({
          pickerParams: pickerParams
        })
      }
      this.setData({
        selectListArr: list
      })
      this.setData({
        characterSelectFlag: true,
        selectType: type || 'mbti',
      })
    },
    handleCommonSkillPicker(e: baseEvent) {
      const { pickerParams2 } = this.data
      const type = e.currentTarget.dataset.type;
      pickerParams2.pickerType = type
      pickerParams2.show = true
      this.setData({ pickerParams2, commonPickerType: type })
    },
    handleCommonPicker(e: baseEvent) {
      const { commonPickerParams, langList } = this.data
      const type = e.currentTarget.dataset.type;
      commonPickerParams.pickerType = type
      commonPickerParams.show = true
      this.setData({ commonPickerParams, commonPickerData: langList, commonPickerType: type })
    },
    handleCommonAgePicker(e: baseEvent) {
      const { commonPickerAgeParams } = this.data
      // 打开picker 设置对应的picker弹出类型
      const type = e.currentTarget.dataset.type;
      commonPickerAgeParams.pickerType = type
      commonPickerAgeParams.show = true
      this.setData({ commonPickerAgeParams, commonPickerType: type })
    },
    handleCommonGenderPicker(e: baseEvent) {
      const { commonPickerGenderParams } = this.data
      let list = [
        {
          text: '全部',
          value: '',
          selectFlag: false
        },
        {
          text: '女性',
          value: '2',
          selectFlag: false
        },
        {
          text: '男性',
          value: '1',
          selectFlag: false
        },
        {
          text: '其他',
          value: '0',
          selectFlag: false
        },
      ]
      // 打开picker 设置对应的picker弹出类型
      const type = e.currentTarget.dataset.type;
      commonPickerGenderParams.pickerType = type
      commonPickerGenderParams.show = true
      // commonPickerParams.data = langList
      this.setData({ commonPickerGenderParams, commonPickerGenderData: list, commonPickerType: type })
    },

    handleInterestPicker(e: any) {
      const type = e.currentTarget.dataset.type;
      this.setData({
        characterSelectFlag: true,
        selectType: type || 'interest',
        pickerParams: { show: true, pickerType: type, defaultValue: '', title: '性格类型' }
      })

    },
    handleButtonTap(event: any) {
      //阻止默认滑动事件
      // event.preventDefault();
      // event.stopPropagation()
    },
    handlePicker(e: baseEvent) {
      // 打开picker 设置对应的picker弹出类型
      const type = e.currentTarget.dataset.type;
      const { formData } = this.data
      let defaultValue = ''
      if (type == 'interest') { // 兴趣
        defaultValue = formData.interestIds
      } else if (type == 'professionId') { // 职业技能
        defaultValue = formData.professionId
      }
      this.setData({ pickerParams: { show: true, pickerType: type, defaultValue: defaultValue, title: '性格类型' } })
    },
    pickerCancel(e: { detail: any }) {
      if (e.detail) {
        // 有值表示是确认
        console.log(e.detail);
        // this.setData({ formData: { ...this.data.formData, ...e.detail } })
      }
      this.setData({
        pickerParams: { show: false, pickerType: '', defaultValue: '', title: '性格类型' },
        pickerParams1: { show: false, pickerType: '', defaultValue: '', title: '兴趣' },
        pickerParams2: { show: false, pickerType: '', defaultValue: '', title: '职业' }
      })
    },
    tapMbti(e: any) {
      const { info } = e.currentTarget.dataset
      const { selectList } = this.data
      // 判断用户点击的是哪一个按钮，从而将那一个按钮状态反选
      selectList.map(item => {
        if (item.text === info.text) {
          item.selectFlag = !item.selectFlag
        }
      })
      this.setData({
        selectList: selectList
      })
    },
    characterTypeChange() {
      this.setData({
        characterSelectFlag: true
      })
    },
    // 性格选择器面板确认按钮
    confirmPicker(e: any) {
      // this.handlePickerData(value)
      const { pickerParams } = this.data
      pickerParams.show = false
      this.setData({
        selectMbtiList: e.detail,
        pickerParams
      }, () => {
        this.handlePickerData()
      })
    },
    // 处理选择器的数据
    handlePickerData() {
      const { selectMbtiList, formData, selectType, pickerParams, pickerParams1, pickerParams2 } = this.data
      pickerParams.show = false
      pickerParams1.show = false
      pickerParams2.show = false
      // 过滤出选中的几项
      let ids: any = []
      let nameList: any = []
      selectMbtiList.length > 0 && selectMbtiList.map(item => {
        ids.push(item.tagTypeId)
        nameList.push(item.text)
      })
      if (selectType == 'interest') { // 兴趣
        formData.interestIds = ids.length > 0 ? ids.join(',') : ''
        formData.interestName = nameList.length > 0 ? nameList.join(',') : ''
      } else if (selectType == 'skill') { // 职业技能
        formData.professionId = ids.length > 0 ? ids.join(',') : ''
        formData.professionName = nameList.length > 0 ? nameList.join(',') : ''
      } else { // mbti
        let textList: any = []
        selectMbtiList.length > 0 && selectMbtiList.map(item => {
          textList.push(item.text)
        })
        formData.personalities = textList.length > 0 ? textList.join(',') : ''
        this.setData({
          formData
        })
      }
      this.setData({
        characterSelectFlag: false,
        formData,
        pickerParams,
        pickerParams1,
        pickerParams2
      }, () => {
        this.checkReset()
      })

    },
    characterConfirm() {
      const { selectList, formData, selectType } = this.data
      // 过滤出选中的几项
      const selectMbtiList = selectList.filter(item => item.selectFlag)
      let ids: any = []
      let nameList: any = []
      selectMbtiList.length > 0 && selectMbtiList.map(item => {
        ids.push(item.tagTypeId)
        nameList.push(item.text)
      })
      if (selectType == 'interest') { // 兴趣
        formData.interestIds = ids.length > 0 ? ids.join(',') : ''
        formData.interestName = nameList.length > 0 ? nameList.join(',') : ''
      } else if (selectType == 'skill') { // 职业技能
        formData.professionId = ids.length > 0 ? ids.join(',') : ''
        formData.professionName = nameList.length > 0 ? nameList.join(',') : ''
      } else { // mbti
        let textList: any = []
        selectMbtiList.length > 0 && selectMbtiList.map(item => {
          textList.push(item.text)
        })
        formData.personalities = textList.length > 0 ? textList.join(',') : ''
      }
      this.setData({
        characterSelectFlag: false,
        currentMbtiList: selectMbtiList,
        formData
      }, () => {
        this.checkReset()
      })
    },
    onSwitchChange() {
      this.setData({
        switchChecked: !this.data.switchChecked
      })
    },
    toSelectPage(e: any) {
      const currentIndex = e.currentTarget.dataset.index
      const { filterData, formData } = this.data
      filterData.length > 0 && filterData.map((item, index) => {
        if (index === currentIndex) {
          item.selectFlag = true
        } else {
          item.selectFlag = false
        }
      })
      // currentIndex
      formData.online = currentIndex == 0 ? 'all' : 'ONLINE'
      this.setData({
        filterData,
        formData
      }, () => {
        this.checkReset()
      })
    },
    closePopup() {
      this.setData({ popupParams: { showPopup: false, showType: 1 } })
    },
    onClosePopup() {
      const customPopup = this.selectComponent('#custom-popup');
      customPopup && customPopup.hidePopup()
    },
    swiperChange(e: any) {
      const currentIndex = e.detail.current
      const { imgList } = this.data
      imgList.length > 0 && imgList.map((item, index) => {
        if (index === currentIndex) {
          item.selectFlag = true
        } else {
          item.selectFlag = false
        }
      })
      this.setData({
        imgList
      })

    },
    sendChange(e: any) {
      this.setData({
        sendFlag: e.detail,
      })
    },
    changeSkillSelect(e: any) {
      const { info } = e.currentTarget.dataset
      const { skillList } = this.data
      // 判断用户点击的是哪一个按钮，从而将那一个按钮状态反选
      skillList.map(item => {
        if (item.text === info.text) {
          item.selectFlag = !item.selectFlag
        }
      })
      this.setData({
        skillList: skillList
      })
    },
    changeSelect(e: any) {
      const { info } = e.currentTarget.dataset
      const { selectList } = this.data
      // 判断用户点击的是哪一个按钮，从而将那一个按钮状态反选
      selectList.map(item => {
        if (item.text === info.text) {
          item.selectFlag = !item.selectFlag
        }
      })
      this.setData({
        selectList: selectList
      })
    },
    changeIndicatorDots() {
      this.setData({
        indicatorDots: !this.data.indicatorDots
      })
    },

    changeAutoplay() {
      this.setData({
        autoplay: !this.data.autoplay
      })
    },

    intervalChange(e: any) {
      this.setData({
        interval: e.detail.value
      })
    },

    durationChange(e: any) {
      this.setData({
        duration: e.detail.value
      })
    },

  }
})